<template>
	<view>
		<u-navbar title="添加银行卡" :autoBack="true" :placeholder="true" leftIconColor="#ffffff"
			:titleStyle="{color: '#ffffff'}" bgColor="#e60000">
		</u-navbar>
		<view class="padding text-black0">
			<view class="margin-bottom-sm font-12 text-bold">真实姓名</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入真实姓名" v-model="realName" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">身份证号</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入身份证号" maxlength="18" v-model="idCardNo" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">开户银行</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入开户银行" v-model="bankName" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">开户支行</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入开户支行" v-model="bankBranch" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">开户地区</view>
			<view class="flex align-center item-bg radius-6" style="height: 78rpx;" @click="selectCity">
				<view class="text-black0" :style="{'color': region == '请选择开户地区' ? 'grey' : '#000000'}">
					{{region}}
				</view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">银行卡号</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入银行卡号" v-model="bankAccount" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">手机号</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-black0 w-100"><input placeholder="请输入手机号" maxlength="11" v-model="mobile" class="w-100"/></view>
			</view>
			<view class="margin-bottom-sm font-12 text-bold">发送验证码</view>
			<view class="flex align-center justify-between item-bg radius-6" style="margin-bottom: 50rpx;">
				<view class="flex">
					<view class="text-black0">
						<input placeholder="请输入验证码" maxlength="6" v-model="code"/>
					</view>
				</view>
				<view class="text-theme text-bold" @click="onCode" v-if="show">发送验证码</view>
				<view class="text-black9 text-bold" v-else>获取验证码（{{count}}）</view>
			</view>

			<view class="btn" @click="addCard">提交</view>

            <view style="color: red">
                <view> *请确保姓名、身份证、银行卡号为同一人</view>
                <view>
                    *仅支持银行: 中国银行、工商银行、建设银行、民生银
                    行、浦发银行、平安银行、华夏银行、中信银行、交通银
                    行、广发银行、渤海银行、浙商银行、上海银行、区域性银
                    行
                </view>
            </view>

        </view>


		<selectCity :show="showCity" @sureSelectArea="onSetCity" @hideShow="onHideShow"></selectCity>
	</view>
</template>

<script>
	import { addBankCard, signing,} from '@/common/api/bank.js'
	import selectCity from '@/components/selectCity/index'
	import { Debounce } from "@/common/utils/tools.js";
	export default {
		components: {
			selectCity
		},
		data() {
			return {
				code: '',
				show: true,
				count: 0,
				checkCode: null,
				realName: '', // 真实姓名
				idCardNo: '',
				bankAccount: '',
				bankName: '',
				bankBranch: '',
				mobile: '',
				codeData: '',
				isClickAdd: true,
				bankList: [],
				selectBankInfo: {},
				showCity: false,
				verCode: '',
				region: '请选择开户地区',
				bankBranchProvince: '',
				bankBranchCity: '',
				bankBranchArea: '',
				addData1: '',
                bankId: ''
			};
		},
        onLoad(options) {
            //编辑
            if(options?.info){
                let info = JSON.parse(decodeURIComponent(options.info))
                this.getDetail(info)
            }

        },
		methods: {
            getDetail(data){
                this.bankId = data.bankId
                this.realName = data.realName
                this.idCardNo = data.idCardNo
                this.bankName = data.bankName
                this.bankAccount = data.bankAccount
                this.bankBranch = data.bankBranch
                this.mobile = data.mobile
                this.code = data.verCode
                this.bankBranchProvince = data.bankBranchProvince
                this.bankBranchCity = data.bankBranchCity
                this.bankBranchArea = data.bankBranchArea
                this.addData1 = data.addData1

                this.region = this.bankBranchProvince + this.bankBranchCity + this.bankBranchArea
            },


			selectCity() {
				this.showCity = true
			},
			onHideShow() {
				this.showCity = false
			},
			//选中省市区
			onSetCity(e) {
				let data = e.detail.target.dataset;
				this.region = data.province + data.city + data.area;
				this.bankBranchProvince = data.province;
				this.bankBranchCity = data.city;
				this.bankBranchArea = data.area;
				this.showCity = false
			},
			// 获取验证码
			onCode() {
				if(!this.checkForm()) {
					return this.checkForm()
				}
				signing({
					realName: this.realName,
					idCardNo: this.idCardNo,
					bankAccount: this.bankAccount,
					bankName: this.bankName,
					mobile: this.mobile
				}).then(res => {
					if (res.code == 200) {
						this.$msg(res.msg)
						this.addData1 = res.data || ''
						this.time()
					} else {
						this.$msg(res.msg)
					}
				})
			},
			time() {
				const TIME_COUNT = 180
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			},
			checkForm() {
				if (!this.realName) {
					return this.$msg('请输入真实姓名')
				}
				if (!this.idCardNo) {
					return this.$msg('请输入身份证号')
				}
				if (!this.bankName) {
					return this.$msg('请输入开户银行')
				}
				if (!this.bankBranch) {
					return this.$msg('请输入开户支行')
				}
				if (!this.bankBranchProvince) {
					return this.$msg('请选择开户地区')
				}
				if (!this.bankAccount) {
					return this.$msg('请输入银行卡号')
				}
				if (!this.mobile) {
					return this.$msg('请输入手机号')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位数手机号')
				}
				return true
			},
			addCard:Debounce(function (e) {
				if(!this.checkForm()) {
					return this.checkForm()
				}
				if (!this.code) {
					return this.$msg('请输入验证码')
				}
				if(!this.isClickAdd) {
					return
				}
				this.isClickAdd = false
				uni.showLoading({
					title: '提交中...',
					mask: false
				})

                let params = {
                    realName: this.realName,
                    idCardNo: this.idCardNo,
                    bankName: this.bankName,
                    bankAccount: this.bankAccount,
                    bankBranch: this.bankBranch,
                    mobile: this.mobile,
                    verCode: this.code,
                    bankBranchProvince: this.bankBranchProvince,
                    bankBranchCity: this.bankBranchCity,
                    bankBranchArea: this.bankBranchArea,
                    addData1: this.addData1
                }

                //编辑
                if(this.bankId){
                    params['bankId'] = this.bankId
                }

				addBankCard(params).then(res => {
					uni.hideLoading()
					this.isClickAdd = true
					if (res.code == 200) {
						this.$msg('提交成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.$msg(res.msg)
					}
				}).catch(err=> {
					uni.hideLoading()
					this.isClickAdd = true
				})
			},800),
		}
	}
</script>

<style lang="scss">
	::v-deep .uni-input-placeholder {
		font-size: 24rpx !important;
	}

	.item-bg {
		padding: 16rpx;
		margin-bottom: 30rpx;
		background: rgba(139, 137, 134, .1);
	}

	.icon-size {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 100%;
		height: 84rpx;
		margin: 30rpx auto;
		border-radius: 12rpx;
		background: #e60000;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
